<template>
  <div class="warp"
       ref="classStat">

  </div>
</template>

<script>
import echarts from 'echarts'

import { getClass } from 'server/admin_k.js'

export default {
  mounted() {
    this._getClass()
  },
  methods: {
    renderView(name, data) {
      // 获得dom节点
      const dom = this.$refs.classStat
      // 开始实例化
      const myChart = echarts.init(dom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: name
        },
        series: [
          {
            name: name[0],
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      }
      // 进行渲染


      myChart.setOption(option)
    },
    _getClass() {
 
      getClass().then(res => {
        const name = res.data.map(v => v.c_name)
        const data = res.data.map(v => {
          return {
            value: v.count,
            name: v.c_name
          }
        })
        this.renderView(name, data)
      })
    }
  }
}
</script>

<style scoped>
.warp {
  width: 100%;
  height: 100%;
}
</style>